<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新建</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <form action="{:url('v1/QuestionOptionResult')}" method="POST">
        <div class="item">
            <select name="" class="question">
                {foreach $question as $key => $item}
                <option value="{$item.id}">{$key+1}. {$item.title}</option>
                {/foreach}
            </select>
            <div class="option" style="border: 1px solid red;">
                {foreach $question2.question_option as $key => $item}
                <label><input type="radio" name="option{$item.question_id}" value="{$item.id}">{$item.option}: {$item.content}</label></br>
                {/foreach}
            </div>
        </div>
        <div class="item">
            <select name="" class="question">
                {foreach $question as $key => $item}
                <option value="{$item.id}">{$key+1}. {$item.title}</option>
                {/foreach}
            </select>
            <div class="option" style="border: 1px solid red;">
                {foreach $question5.question_option as $key => $item}
                <label><input type="radio" name="option{$item.question_id}" value="{$item.id}">{$item.option}: {$item.content}</label></br>
                {/foreach}
            </div>
        </div>
        <div class="item">
            <select name="" class="question">
                {foreach $question as $key => $item}
                <option value="{$item.id}">{$key+1}. {$item.title}</option>
                {/foreach}
            </select>
            <div class="option" style="border: 1px solid red;">
                {foreach $question6.question_option as $key => $item}
                <label><input type="radio" name="option{$item.question_id}" value="{$item.id}">{$item.option}: {$item.content}</label></br>
                {/foreach}
            </div>
        </div>
        <select name="country_intro_id[]" multiple style="height: 350px;">
            {foreach $country_intro as $item}
                <option value="{$item.id}">{$item.name}</option>
                {/foreach}
        </select>
        <button type="submit">提交</button>
    </form>
</body>
<script>
    $(".question").change(function () {
        let that = $(this);
        let id = that.val();
        if (id == '') return false;
        $.ajax({
            url: '/v1/question/' + id,
            type: 'get',
            dataType: 'json',
            success(res) {
                let div = that.parents(".item").children(".option");
                div.html("")
                $.each(res.question_option, function (key, val) {
                    div.append(`<label><input type="radio" name="option${val.question_id}" value="${val.id}">${val.option}: ${val.content}</label></br>`)
                })
            }
        })
    })
</script>

</html>